﻿@model OrderPackageModel
@using Logistics.Web.Models.Order

<div class="calculate-rate">
    <h2>@T("Logistics.CalculateRate")</h2>
    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "logistics-rate-calculatepackagecost" }))
    {
        <div id="rateCalculationForm">
            <div class="rate-calculation-left col-ms-12 col-xs-8 col-sm-7 col-md-9 col-lg-9">
                <div class="rate-calculation-address col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h4>1) Location:</h4>
                    <div class="col-ms-12 col-xs-12 col-sm-5 col-md-5 col-lg-5 pick-up-from">
                        <h5>@T("Address.Fields.PickupZipPostalCode") <i class="fa fa-building"></i></h5>
                        @*@T("Address.Fields.ZipPostalCode")<span class="required">*</span>&nbsp;*@
                        @Html.TextBox("originZipPostalCode", null, new { @class = "form-control", @placeholder = "Postal Code" })
                    </div>
                    <div class="col-ms-12 col-xs-12 col-sm-2 col-md-2 col-lg-2"></div>
                    <div class="col-ms-12 col-xs-12 col-sm-5 col-md-5 col-lg-5 deliver-to">
                        <h5>@T("Address.Fields.DeliveryZippostalcode") <i class="fa fa-home"></i></h5>
                        @*@T("Address.Fields.ZipPostalCode")<span class="required">*</span>&nbsp;*@
                        @Html.TextBox("deliveryZipPostalCode", null, new { @class = "form-control", @placeholder = "Postal Code" })
                        <div class="clear"></div>
                        @Html.CheckBox("isResidential")
                        <span>Residential location</span>
                        <span class="icon-info" rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" data-html="true" data-original-title=" A residential location is defined as a location that is a home, including a business operating out of a home. An additional fee of $2 per package will apply if the delivery location is a residential location."><i class="fa fa-info-circle"></i></span>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="rate-calculation-package-type col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h4>
                        2) Package Type:
                        <span class="package-help" data-toggle="modal" data-target="#packageModal">
                            <span rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="right" data-html="true" data-original-title="What are our package types?"><i class=" fa fa-question-circle"></i></span>
                        </span>
                    </h4>
                    <div class="modal fade" id="packageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    @*<h4>SpotsHUB Letter Size:</h4>
                                        <img src="/Content/images/spotshub_letter_measurement.png" />
                                        <h4>SpotsHUB Compact Size:</h4>
                                        <img src="/Content/images/spotshub_compact_measurement.png" />
                                        <h4>SpotsHUB Full Size</h4>
                                        <img src="/Content/images/spotshub_full_measurement.png" />
                                        <h4>SpotsHUB Custom Size</h4>
                                        <img src="/Content/images/spotshub_custom_measurement.png" />
                                        <p>Please note that, Maximum allowable single-side length is 63 in.</p>*@
                                    <h4>SpotsHUB Package Types:</h4>
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>Max. Package Dimension:</th>
                                                <th>Max. Package Weight:</th>
                                                <th>Starting From:</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Letter Size</td>
                                                <td>12 in. + 9 in. + 1 in.</td>
                                                <td>2 lb.</td>
                                                <td>$5.99</td>
                                            </tr>
                                            <tr>
                                                <td>Compact Size</td>
                                                <td>48 in.</td>
                                                <td>11 lb.</td>
                                                <td>$11.99</td>
                                            </tr>
                                            <tr>
                                                <td>Full Size</td>
                                                <td>71 in.</td>
                                                <td>33 lb.</td>
                                                <td>$19.99</td>
                                            </tr>
                                            <tr>
                                                <td>Custom Size</td>
                                                <td>118 in.</td>
                                                <td>66 lb.</td>
                                                <td>$20.99</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <p>Please note that, the Maximum allowable single-side length is 63 in.</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rate-package-type-select">
                        <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.RadioButtonFor(model => model.SpotshubPackageSize, 1, new { id = "SpotshubPackageSize1" })
                            <label for="SpotshubPackageSize1">@T("Logistics.Order.Package.Size.Letter")</label>
                        </div>
                        <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.RadioButtonFor(model => model.SpotshubPackageSize, 2, new { id = "SpotshubPackageSize2" })
                            <label for="SpotshubPackageSize2">@T("Logistics.Order.Package.CompactSize")</label>
                        </div>
                        <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.RadioButtonFor(model => model.SpotshubPackageSize, 3, new { id = "SpotshubPackageSize3" })
                            <label for="SpotshubPackageSize3">@T("Logistics.Order.Package.FullSize")</label>
                        </div>
                        <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.RadioButtonFor(model => model.SpotshubPackageSize, 0, new { id = "SpotshubPackageSize0" })
                            <label for="SpotshubPackageSize0">@T("Logistics.Order.Package.PackageInfo.Enter"):</label>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="package-measurement row">
                    <div class="rate-calculation-package-dimension col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h4>2a) Package Dimension:</h4>
                        <div class="col-ms-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 rate-calculation-package-dimension-left">
                            @T("Logistics.Order.Package.Dimension.Enter") (L x W x H):
                        </div>
                        <div class="col-ms-12 col-cs-12 col-sm-12 col-md-8 col-lg-8 rate-calculation-package-dimension-right">
                            <div class="col-ms-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 rate-package-dimension-input">
                                @Html.TextBoxFor(model => model.Length, null, new { @class = "form-control", @placeholder = "L" })
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 rate-package-dimension-input">
                                @Html.TextBoxFor(model => model.Width, null, new { @class = "form-control", @placeholder = "W" })
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 rate-package-dimension-input">
                                @Html.TextBoxFor(model => model.Height, null, new { @class = "form-control", @placeholder = "H" })
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-12 col-md-4 col-md-4 rate-package-dimension-select">
                                <span>Unit: </span>
                                @foreach (var d in Model.AvaliableDimensionMeasure)
                                {
                                    var dselected = d.Selected ? "selected" : "";
                                    @Html.RadioButtonFor(model => model.DimensionMeasureId, d.Value, new { selected = dselected })
                                    <span>@d.Text</span>
                                }
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>

                    <div class="rate-calculation-package-weight col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h4>2b) Package Weight:</h4>
                        <div class="col-ms-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 rate-package-weight-left">
                            @T("Logistics.Order.Package.Weight.Enter"):
                        </div>
                        <div class="col-ms-12 col-cs-12 col-sm-12 col-md-8 col-lg-8 rate-package-weight-right">
                            <div class="col-ms-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 rate-package-weight-input">
                                @Html.TextBoxFor(model => model.Weight, null, new { @class = "form-control" })
                            </div>
                            <div class="row"></div>
                            <div class="col-ms-12 col-xs-12 col-sm-12 col-md-4 col-md-4 rate-package-weight-select">
                                <span>Unit:</span>
                                @foreach (var w in Model.AvaliableWeightMeasure)
                                {
                                    var dselected = w.Selected ? "selected" : "";
                                    @Html.RadioButtonFor(model => model.WeightMeasureId, w.Value, new { selected = dselected })
                                    <span>@w.Text</span>
                                }
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="rate-calculation-package-insurance col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h4>3) Package Information:</h4>
                    </div>
                    <div class="package-options">
                        <div class="package-block-left col-ms-12 col-xs-12 col-sm-4 col-md-4 col-lg-4">
                            <div class="package-block-left-wrapper">
                                <div class="package-option">
                                    @T("Logistics.Order.Package.IsVertical")?
                                    <span class="icon-info" rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" data-html="true" data-original-title=" Please select this option if the package needs to be shipped in a specific orientation. The outside of package must have clear markings, specifying the preferred orientation (e.g., &ldquo;Up arrows&rdquo; or &ldquo;This Side Up&rdquo; markings)."><i class="fa fa-info-circle"></i></span>
                                </div>
                                <div class="package-line">
                                    @Html.RadioButtonFor(model => model.IsVertical, false)
                                    <label for="IsVertical">No</label>
                                </div>
                                <div class="package-line">
                                    @Html.RadioButtonFor(model => model.IsVertical, true, new { @id = "IsVertical1" })
                                    <label for="IsVertical1">Yes (+$1)</label>
                                </div>
                            </div>
                            <div class="content-clear"></div>
                        </div>
                        <div class="package-block-left col-ms-12 col-xs-12 col-sm-4 col-md-4 col-lg-4">
                            <div class="package-block-left-wrapper">
                                <div class="package-option">
                                    @T("Logistics.Order.Package.IsFragile")?
                                    <span class="icon-info" rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" data-html="true" data-original-title=" Please select this option if the package could be easily broken or damaged, or needs special handling while being shipped."><i class="fa fa-info-circle"></i></span>
                                </div>

                                <br />
                                <div class="package-line">
                                    @Html.RadioButtonFor(model => model.IsFragile, false)
                                    <label for="IsFragile">No</label>
                                </div>
                                <div class="package-line">
                                    @Html.RadioButtonFor(model => model.IsFragile, true, new { @id = "IsFragile1" })
                                    <label for="IsFragile1">Yes (+$3)</label>
                                </div>
                            </div>
                            <div class="content-clear"></div>
                        </div>
                        <div class="package-block-left col-ms-12 col-xs-12 col-sm-4 col-md-4 col-lg-4">
                            <div class="package-block-left-wrapper">
                                <div class="package-option">
                                    @T("Logistics.Order.Package.IsDangerous")?
                                    <span class="icon-info" rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" data-html="true" data-original-title=" Please select this option if the package being shipped is listed in the Transportation of Dangerous Goods Regulations by the Canadian Transport Emergency Centre (CANUTEC). A shipping document that contains detailed information about the package is required to be presented for each dangerous good to be shipped."><i class="fa fa-info-circle"></i></span>
                                </div>


                                <div class="package-line">
                                    @Html.RadioButtonFor(model => model.IsDangerous, false)
                                    <label for="IsDangerous">No</label>
                                </div>
                                <div class="package-line">
                                    @Html.RadioButtonFor(model => model.IsDangerous, true, new { @id = "IsDangerous1" })
                                    <label for="IsDangerous1">Yes (+$6)</label>
                                </div>
                            </div>
                            <div class="content-clear"></div>
                        </div>
                        <div class="content-clear"></div>
                    </div>
                    <div class="content-clear"></div>
                </div>
                <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12 package-insurance-container">
                    <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h4>
                            4) Package Insurance:
                            <span class="package-help" data-toggle="modal" data-target="#insuranceModal">
                                <span rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="right" data-html="true" data-original-title="What is our package insurance?"><i class=" fa fa-question-circle"></i></span>
                            </span>
                        </h4>
                        <div class="modal fade" id="insuranceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h3>Additional Insurance</h3>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    </div>
                                    <div class="modal-body">
                                        <p>SpotsHUB provides FREE insurance coverage against damage or loss for the first $20 of the declared value of each package.</p>
                                        <p>You may purchase additional insurance coverage in increments of $20 up to a maximum of $5,000 for most items. The cost of additional insurance is $0.40 per $20 of declared value (after the first $20).</p>
                                        <p>Additional insurance must be selected when placing the order to ensure that it is properly captured and linked to the unique tracking number of your package. Any damaged or lost package without a declared value will be covered for $20 only.</p>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="package-option col-ms-12 col-xs-12 col-sm-4 col-md-4 col-lg-4">
                            @T("Logistics.Order.Package.InsuranceValue.Declare"):
                        </div>
                        <div class="col-ms-4 col-xs-4 col-sm-8 col-md-8 col-lg-8 package-weight">
                            <div class="package-line package-weight-input package-input-wrapper col-ms-5 col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                @Html.TextBoxFor(model => model.InsuranceValue, new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                    <div class="content-clear"></div>
                </div>
                <div class="rate-calculation-package-service col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h4>5) Shipping Service:</h4>
                    <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12 rate-package-service-select">
                        @Html.RadioButton("ServiceType", "NextDay", true, new { @id = "next_day_shipping_service" })
                        <label for="ServiceType">Next Day Shipping Serivce (Cut off at 12PM)</label>
                        <br />
                            @Html.RadioButton("ServiceType", "NextDay", false, new { @id="same-day-shipping", @disabled = "disabled" })
                            <label class="not-available" for="same-day-shipping">Same day shipping service (temporarily unavailable)</label>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="rate-calculation-package-note col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="rate-calculation-result-block">
                        <input id="rate-calculation-button" class="btn btn-info button-grey rate-calculation-button-top" type="button" value="Calculate Rate" />
                    </div>
                </div>




            </div>
            <div class="rate-calculation-right col-ms-12 col-xs-4 col-sm-5 col-md-3 col-lg-3">
                <div class="rate-calculation-result-block">
                    <div class="rate-calculation-result text-center">
                        <h4>@T("Logitics.Rate.CalculatePackageCost.EstimatedCost"):</h4>
                        <div class="result text-center"><h3>N/A</h3></div>
                    </div>
                    @*<input id="rate-calculation-button rate-calculation-button-top" class="button-grey" type="button" value="Calculate" />*@
                </div>
            </div>
        </div>
        <div class="back-to-top">
            <a href="#backtop"><i class="fa fa-angle-up"></i></a>
        </div>
    }
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#shipping-express-order").hide();
        $("#shipment-cost").hide();
        checkLetterSize(false);
    });

    $(".rate-package-type-select input").change(function () {
        checkLetterSize(true);
    });

    //function checkLetterSize(animation) {
    //    if ($("input#IsLettersize:checked").val() == "True") {
    //        if (animation) {
    //            $(".package-measurement").stop().animate({ "height": 0 });
    //        } else {
    //            $(".package-measurement").css("height", 0);
    //        }
    //    } else if ($("input#IsLettersize:checked").val() == "False") {
    //        if (animation) {
    //            $(".package-measurement").stop().animate({ "height": $(".package-measurement-wrapper").height() });
    //        }
    //    }
    //}



    //Daniel need to recheck
    function checkLetterSize(animation) {
        if ($("input#SpotshubPackageSize0:checked").val() == "0") {
            if (animation) {
                $(".package-measurement").show();
                $(".package-measurement").stop().animate({ "height": $(".package-measurement-wrapper").height() });
            }
        }
        else {
            $(".package-measurement").hide();
            //if (animation) {
            //    $(".package-measurement").stop().animate({ "height": 0 });
            //} else {
            //  $(".package-measurement").css("height", 0);
            //}
        }
    }

    $("#rate-calculation-button").on("click", function () {
        costCalculate();
    });

    $("#calculate-error-summary .fa").on("click", function () {
        $("#calculate-error-summary").stop().animate({
            height: 0
        }, function () {
            $("#calculate-error-summary .error-content").html("");
        });
    });
    function costCalculate() {
        if ($("#calculate-error-summary").height() > 0) {
            $("#calculate-error-summary").stop().animate({
                height: 0
            }, function () {
                $("#calculate-error-summary .error-content").html("");
            });
        }
        $(".rate-calculation-result").css("height", "0");
        $(".rate-calculation-loading").show();
        $.ajax({
            cache: false,
            type: "POST",
            url: "@Url.RouteUrl("AjaxCalculatePackageCost")",
            data: $("#logistics-rate-calculatepackagecost").serializeArray(),
            success: function (response) {
                if (response.Cost) {
                    $(".rate-calculation-result .result").html('<h3>' + response.Cost + '</h3>' + '<a href="@Url.Action("Index", "Order")" class="btn btn-primary">' + '@T("Logistics.Menu.PlaceOrder")' + '</a>');
                }
                else if (response.Errors) {
                    $(".rate-calculation-result .result").html("N/A");
                    var str = "";
                    for (var i = 0; i < response.Errors.length; i++) {
                        str += '<li>' + response.Errors[i] + '</li>';
                    }
                    $("#calculate-error-summary .error-content").html('<ul>' + str + '</ul>');
                    $("#calculate-error-summary").stop().animate({
                        height: $("#calculate-error-summary .error-content").outerHeight()
                    });
                    $("html, body").stop().animate({ scrollTop: 0 });
                    $("#shipping-express-order").hide();
                    $("#shipment-cost").hide();
                }
                else {
                    $("#shipping-express-order").hide();
                    $("#shipment-cost").hide();
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $("#calculate-error-summary .error-content").html('<ul><li>' + xhr.XMLHttpRequest.responseText + '</li></ul>');
                $("#calculate-error-summary").stop().animate({
                    height: $("#calculate-error-summary .error-content").outerHeight()
                });
                $("html, body").stop().animate({ scrollTop: 0 });
            }
        }).always(function () {
            $(".rate-calculation-loading").hide();
            $(".rate-calculation-result").css("height", "auto");
        });
    }
    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    $('.residential-row .icon-info').mouseenter(function () {
        if (!$(".mobile-nav").is(":visible")) {
            var infobox = $(this).closest('.residential-row').find('.residential-option-info');
            infobox.css({ "left": $(this).position().left, "top": $(this).position().top + 25, "opacity": 0 });
            infobox.stop().show().animate({ "opacity": 1 });
        }
    }).mouseleave(function () {
        if (!$(".mobile-nav").is(":visible")) {
            var infobox = $(this).closest('.residential-row').find('.residential-option-info');
            infobox.css({ "opacity": 1 });
            infobox.stop().animate({ "opacity": 0 }, function () {
                $(this).hide();
            });
        }
    }).click(function () {
        $('.residential-option-info').stop().animate({ "opacity": 0 }, function () {
            $(this).hide();
        });
        var infobox = $(this).closest('.residential-row').find('.residential-option-info');
        infobox.css({ "left": "30px", "top": $(this).position().top + 25, "opacity": 0 });
        infobox.stop().show().animate({ "opacity": 1 });
        $(".package-infobox-bg").show();
    });

    $(window).scroll(function () {
        if ($(this).scrollTop()) {
            $('.back-to-top').fadeIn();
        } else {
            $('.back-to-top').fadeOut();
        }
    });

    $(".back-to-top ").click(function (e) {
        e.preventDefault();
        $("body,html").animate({ scrollTop: 0 }, 500);
    });

    $(".rate-calculation-button-top").click(function (e) {
        e.preventDefault();
        $("body,html").animate({ scrollTop: 0 }, 500);
    });

    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip({
            'delay': { hide: 300 }
        });
    });


</script>
